import React, {PureComponent} from 'react';
import {View, FlatList, Text, StyleSheet} from 'react-native';
import RecommendItem from './RecommendItem';
import {IsNullObject} from '../../utils/utils';

import {GetSwiper} from '../../mode/swiperCtr';

class Recommend extends PureComponent {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  componentWillUnmount() {}

  state = {
    selected: (new Map(): Map<string, boolean>),
    loading: false,
    hasMore: true,
  };

  _keyExtractor = (item, index) => index;

  _onPressItem = (item) => {
    const navigation = this.props.navigation;
    GetSwiper(item).then((res) => {
      navigation.navigate('detailPage', {item: res});
    });
  };

  _renderItem = ({item, index}) => (
    <RecommendItem index={index} item={item} onPressItem={this._onPressItem} />
  );
  ScrollToLower = () => {
    if (!this.state.hasMore || this.state.loading) {
      return;
    }
    this.setState({loading: true});
    const {ToLowerEvent} = this.props;
    if (IsNullObject(ToLowerEvent) === false) {
      ToLowerEvent();
    }
  };
  ScrollTop = () => {
    if (this.props.list !== null && this.props.list.length > 0) {
      this.refs.myFlatList.scrollToIndex({viewPosition: 0, index: 0});
    }
  };
  RefData = (hasMore = true) => {
    this.setState({
      loading: false,
      hasMore: hasMore,
    });
  };

  _renderFooter = () => {
    let v1 =
      this.state.loading === true ? (
        <View style={styles.home__loading}>
          <Text style={styles.loading_text}>正在加载中...</Text>
        </View>
      ) : (
        <View />
      );

    let v2 =
      this.state.hasMore === true ? (
        <View style={styles.home__loading}>
          <Text style={styles.loading_text}>更多内容，敬请期待</Text>
        </View>
      ) : (
        <View />
      );

    return (
      <View>
        {v1}
        {/*{v2}*/}
      </View>
    );
  };

  render() {
    return (
      <FlatList
        style={{height: this.props.height}}
        data={this.props.list}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
        onEndReachedThreshold={0.2}
        onEndReached={this.ScrollToLower}
        ListFooterComponent={this._renderFooter}
        ref={'myFlatList'}
      />
    );
  }
}

const styles = StyleSheet.create({
  home__loading: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: 80,
  },
  loading_text: {
    color: '#666666',
    fontSize: 18,
  },
});

export default Recommend;
